<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <iframe id='HtmlEdit' style="width:400px; height: 300px" marginWidth='2px' marginHeight='2px'></iframe>
    <div id="butGroup">
        <button id="bold">加粗</button>
        <button id="copy">复制</button>
        <button id="big">变大</button>
        <button id="italic">斜体</button>
        <button id="underline">下划线</button>
        <button id="hiliteColor">背景色</button>

        <button id="save">上传</button>
    </div>

    <div id="box" style="height: 300px;width: 400px;border: 1px solid black">

    </div>

</body>

</html>
<script>
    const editor = document.getElementById("HtmlEdit").contentWindow;//获取iframe Window 对象
    const doc = document.getElementById("HtmlEdit").contentDocument; //获取iframe documen 对象
    const butGroup = document.getElementById('butGroup');
    const box = document.getElementById('box');
    //只需键入以下设定，iframe立刻变成编辑器。
    editor.document.designMode = 'On';  //打开设计模式
    editor.document.contentEditable = true;// 设置元素为可编辑
    //设置事件监听
    butGroup.onclick = function (evt) {
        let e = evt || window.event
        let targetId = e.target.id
        //获取点击的标签的id
        switch (targetId) {
            case 'bold': addBold(); break;
            case 'big': big(); break;
            case 'copy': copy(); break;
            case 'italic': italic(); break
            case 'hiliteColor': hiliteColor(); break;
            case 'underline': underline(); break;
            case 'save': save(); break
        }
    }
    //字体变大方法
    function big() {
        //所有字体特效只是使用 execComman() 就能完成。
        editor.document.execCommand("fontSize", true, 5);
    }
    //复制方法
    function copy() {
        editor.document.execCommand("copy", true, null);
    }
    //加粗方法
    function addBold() {
        editor.document.execCommand("Bold", true, null);
    }
    //斜体方法
    function italic() {
        editor.document.execCommand('italic', true, null)
    }
    //加背景色
    var hiliteColor = () => { editor.document.execCommand('hiliteColor', true, 'yellow') }  //ES6 的箭头函数写法

    //加下划线方法
    var underline = () => { editor.document.execCommand('underline', true, null) }  //ES6 的箭头函数写法

    //上传方法
    function save() {
        box.innerHTML = doc.body.innerHTML;
    }

</script>